<template>
  <div class="login-register">
    <van-tabs v-model="active" class="login-tabs">
      <van-tab v-if="ifCodePwd" title="短信验证码登录">
        <div class="id">
          <van-cell-group>
            <van-field
              @blur="phoneCheck"
              v-model="phone"
              label="手机号"
              placeholder="请输入手机号"
              :error-message="errorMessage"
            />

            <van-field
              v-model="sms"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <van-button
                @click="phoneCode"
                :disabled="showButton"
                slot="button"
                size="small"
                type="primary"
                >{{ codeText }}</van-button
              >
            </van-field>
          </van-cell-group>
        </div>
      </van-tab>

      <van-tab v-if="ifCodePwd" title="账号登录">
        <van-cell-group>
          <van-field
            v-model="username"
            clearable
            label="用户名"
            placeholder="请输入用户名"
            @click-right-icon="$toast('question')"
          />

          <van-field
            v-model="password"
            type="password"
            label="密码"
            placeholder="请输入密码"
          />
        </van-cell-group>
      </van-tab>
    </van-tabs>

    <div class="login-button">
      <van-button type="primary" @click="hanleGetData" size="large"
        >登录</van-button
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  data() {
    return {
      username: "",
      password: "",
      active: 2,
      phone: "",
      sms: "",
      errorMessage: "",
      codeText: "获取验证码",
      showButton: true,
      count: "5",
      ifCodePwd: true
    };
  },
  methods: {
    // 手机号格式验证
    phoneCheck() {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.phone)) {
        this.errorMessage = "手机号格式错误";
        this.showButton = true;
      } else {
        this.showButton = false;
        this.errorMessage = "";
      }
    },
    phoneCode() {
      // 获取验证码
      this.getCode();
      // 登录状态验证码
      this.getCodeInfo();
    },
    getCode() {
      this.codeText = this.count + "秒后重新获取";
      if (this.showButton) return;
      this.showButton = true;
      let timer = window.setInterval(() => {
        this.count--;
        console.log(this.count);
        this.codeText = this.count + "秒后重新获取";
        if (this.count <= 0) {
          window.clearInterval(timer);
          this.codeText = "重新获取";
          this.showButton = false;
          this.count = 5;
          console.log("执行了");
        }
      }, 1000);
    },
    getCodeInfo() {
      let params = {
        phone: this.phone,
        state: "login"
      };
      let qsData = qs.stringify(params);
      axios
        .post("/api/sendSMS", qsData)
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    hanleGetData() {
      console.log(this.username, this.password);
      if (!this.ifCodePwd) {
        this.getMerchantInfo();
      } else {
        this.getMerchantPwdInfo();
      }
    },
    getMerchantInfo() {
      let params = {
        phone: this.phone,
        code: this.sms
      };
      let qsData = qs.stringify(params);
      let this_ = this;
      axios
        .post("/api/doLoginByPhoneCode", qsData)
        .then(function(response) {
          this_.$router.push("/");
          console.log(response);
          debugger;
        })
        .catch(function(error) {
          console.log(error);
        });
      // axios.get("api/doLogin1", {
      //   params: {
      //     name: this.username,
      //     password: this.password
      //   }
      // });
    },
    getMerchantPwdInfo() {
      let params = {
        name: this.username,
        password: this.password
      };
      let qsData = qs.stringify(params);
      let this_ = this;
      axios
        .post("/api/doLogin", qsData)
        .then(function(response) {
          const data = response.data;
          if (data.result === "success") {
            this_.$router.push("/");
            console.log("登录成功");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
.login-button {
  position: relative;
  top: 0.5rem;
  text-align: center;
  padding: 0 1.173rem;
}
</style>
